<!-- html -->
<template>
  <el-table v-loading="loading" :data="ownerList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="货主名称" align="center" prop="name" />
    <el-table-column label="所在城市" align="center" prop="city" />
    <el-table-column label="详细地址" align="center" prop="address" />
    <el-table-column label="负责人" align="center" prop="personInCharge" />
    <el-table-column label="创建人" align="center" prop="createBy" />
    <el-table-column label="创建时间" align="center" prop="createTime" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" title="删除" icon="Delete" @click="handleDelete(scope.row)"
          v-hasPermi="['cargoowner:owner:remove']"></el-button>
        <el-button link type="primary" title="编辑" icon="Edit" @click="handleUpdate(scope.row)"
          v-hasPermi="['cargoowner:owner:edit']"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<!-- 
      ts
      setup 支持setup语法糖
 -->
<script lang="ts" setup>
import { Ref, defineProps, defineEmits } from 'vue';

//接收父组件参数
let props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  ownerList: {
    type: Array,
    default: []
  }
});

//定义事件
const emits = defineEmits(['handleSelectionChange', 'handleUpdate', 'handleDelete'])
let handleSelectionChange = (selection) => {
  //调用父组件函数
  emits('handleSelectionChange', selection)
};
//修改
let handleUpdate = (row) => {
  //调用父组件方法
  emits('handleUpdate', row)
};
//删除
let handleDelete = (row) => {
  //调用父组件函数
  emits('handleDelete', row)
}
</script>

<!-- css样式 -->
<style scoped></style>